<template>
	<div v-loading="loading">
		<div class="tree-title">
			<template v-if="isEdit">组内成员</template>
			<template v-else>{{record.groupName}}组成员列表</template>
			<el-button class="fr" type="primary" @click="addUser">添加成员</el-button>
		</div>
		<el-table :data="memberList" border>
			<el-table-column label="用户名称" prop="userName"></el-table-column>
			<el-table-column label="真实名称" prop="realName"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-tooltip content="删除" placement="right" effect="light">
						<div class="user-action action-delete" @click="handleDelete(scope.row)"></div>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<add-member ref="addMember" :memberList="memberList" :groupId="record.groupId" @refresh="refresh"></add-member>
	</div>
</template>

<script>
	import { getGroupMemberList,updateGroupMember } from "@/api/dataManagement/system/group";
	import addMember from './addMember'
	export default {
		components: { addMember },
		props: ['isEdit'],
		data() {
			return {
				isDialog: true,
				record: {},
				loading: false,
				memberList: []
			}
		},
		methods: {
			addUser() {
				this.$refs.addMember.show()
			},
			handleDelete(record) {
				console.log("record:", record)
				let params = {
					groupId: this.record.groupId,
					isAdd: false,
					userIds: [record.userId]
				}
				this.loading = true
				updateGroupMember(params).then(res => {
					if (res.code == 200) {
						this.msgSuccess(res.msg)
						this.getMemberList()
					}
					this.loading = false
				})
			},
			getGroupId(record) {
				this.record = record
				this.getMemberList()
				// this.loading = false
			},
			getMemberList() {
				getGroupMemberList({ id: this.record.groupId }).then(res => {
					this.memberList = res.data
					if (!this.isEdit) {
						this.$emit('closeLoading')
					}
					this.loading = false
				})
			},
			refresh() {
				if (!this.isEdit) {
					this.$emit('refresh')
				}
				this.loading = true
				this.getMemberList()
			}

		}

	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/styles/system/common.scss";
	@import "~@/assets/styles/system/tree.scss";
</style>